<template>
	<el-container>
		<el-main class="nopadding">
			<el-card :header="bpmReport.title">
				<el-row :gutter="20">
					<el-col :span="6" :offset="6">
						<el-form-item label="开始时间(起)">
							<el-date-picker v-model="form.createTimeBeginTime" placeholder="开始时间(起)" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item label="开始时间(止)">
							<el-date-picker v-model="form.createTimeEndTime" placeholder="开始时间(止)" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6" :offset="6">
						<el-form-item label="结束时间(起)">
							<el-date-picker v-model="form.endTimeBeginTime" placeholder="结束时间(起)" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item label="结束时间(止)">
							<el-date-picker v-model="form.endTimeEndTime" placeholder="结束时间(止)" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6" :offset="6">
						<el-form-item label="发起人">
							<select-user-dialog v-model:accountId="form.createUser" :mode="false"/>
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item label="公文状态">
							<el-select v-model="form.endStatus">
								<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<template v-for="(item,index) in queryFields" :key="index">
				<el-row :gutter="20" v-if="index%2==0">
					<el-col :span="6" :offset="6">
						<el-form-item :label="queryFields[index].text">
							<el-date-picker v-if="queryFields[index].type=='date'" v-model="form[queryFields[index].field]" :placeholder="queryFields[index].text" type="date" value-format="YYYY-MM-DD"
											style="width: 100%;"></el-date-picker>
							<el-select v-else-if="queryFields[index].type=='select'" v-model="form[queryFields[index].field]">
								<el-option v-for="opitem in queryFields[index].option" :key="opitem.value" :label="opitem.label" :value="opitem.value"></el-option>
							</el-select>
							<select-user-dialog v-else-if="queryFields[index].type=='selectUser'"
												v-model:accountId="form[queryFields[index].field]" :mode="false"/>
							<el-input v-else v-model="form[queryFields[index].field]" :placeholder="queryFields[index].text" maxlength="80" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="6">
						<el-form-item :label="queryFields[index+1].text">
							<el-date-picker v-if="queryFields[index+1].type=='date'" v-model="form[queryFields[index+1].field]" :placeholder="queryFields[index+1].text" type="date" value-format="YYYY-MM-DD"
											style="width: 100%;"></el-date-picker>
							<el-select v-else-if="queryFields[index+1].type=='select'" v-model="form[queryFields[index+1].field]">
								<el-option v-for="opitem in queryFields[index+1].model" :key="opitem.value" :label="opitem.label" :value="opitem.value"></el-option>
							</el-select>
							<select-user-dialog v-else-if="queryFields[index+1].type=='selectUser'"
												v-model:accountId="form[queryFields[index+1].field]" :mode="false"/>
							<el-input v-else v-model="form[queryFields[index+1].field]" :placeholder="queryFields[index+1].text" maxlength="80" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
</template>
<div style="text-align: center">
<el-button type="primary" @click="forSearch()">查 询</el-button>
<el-button type="success" @click="getBiFormDataToFile()">导 出</el-button>
</div>
</el-card>

<scTable ref="table" :params="{reportId:reportId}" :apiObj="apiObj" row-key="runId" stripe remoteSort remoteFilter>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column v-for="item in tableHead" :label="item.text" :prop="item.field" :key="item.field" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="100">
	<template #default="scope">
		<el-button-group>
			<el-button text type="primary" size="small" @click="readBpmDetails(scope.row, scope.$index)">查看</el-button>
		</el-button-group>
	</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
</template>

<script>
import selectUserDialog from "@/views/module/selectUserDialog";

export default {
	name: 'Bpm Report Query',
	components: {selectUserDialog},
	data() {
		return {
			apiObj: this.$API.bpm.bpmReport.getBpmReportData,
			bpmReport: {},
			tableHead: [],
			queryFields: [],
			option: [{value: '', label: '全部'}, {value: '0', label: '进行中'}, {value: '1', label: '已结束'}],
			form: {
				createTimeBeginTime: '',
				createTimeEndTime: '',
				endTimeBeginTime: '',
				endTimeEndTime: '',
				createUser: '',
				endStatus: '',
			},
			reportId: this.$route.query.reportId
		}
	},
	mounted() {
		this.getBpmReportById();
	},
	methods: {
		forSearch() {
			this.$refs.table.upData({reportId: this.reportId,conditionJson:JSON.stringify(this.form)})
		},
		getBiFormDataToFile(){
			this.$API.bpm.bpmReport.getBiFormDataToFile.fileDownload({reportId: this.reportId,conditionJson:JSON.stringify(this.form)});
		},
		async getBpmReportById() {
			var res = await this.$API.bpm.bpmReport.getBpmReportById.get({reportId: this.reportId});
			if (res.code == 200) {
				this.bpmReport = res.data;
				this.tableHead = JSON.parse(this.bpmReport.tableHead);
				this.queryFields = JSON.parse(this.bpmReport.queryFields);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		readBpmDetails(row, index) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/doc/handle/read',
					query: {
						runId: row.runId
					}
				})
			})
		},
	}

}
</script>

<style>
</style>
